// 1.点击查询所有页面的编辑按钮：将当前的id传递到编辑页面，并弹出编辑页面
//2.根据id进行查询数据，将查询出来的数据进行显示到页面
//3.在显示之前：应该先创建富文本？然后在赋值
//4.赋值：editor.txt.html(data.content);
//5.提交编辑之前还需要得到id， data.id = sessionStorage.getItem("userId");
layui.use(['upload', 'form', 'util', 'layer', 'table'], function () {
    var util = layui.util
        , layer = layui.layer
        , table = layui.table
        , $ = layui.jquery;
    let form = layui.form;
    let upload = layui.upload;
    let path = "";
    //常规使用 - 普通图片上传
    var uploadInst = upload.render({
        elem: '#file'
        , url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                $('#demo1').attr('src', result); //图片链接（base64）
            });
        }
        , done: function (res) {
            console.log(res);
            path = res.data.src;

            //如果上传失败
            if (res.code > 0) {
                return layer.msg('上传失败');
            }
            //上传成功的一些操作
            //……
            $('#demoText').html(''); //置空上传失败的状态
        }

    });
    getCuisineData();

    function getCuisineData() {
        let res = myAjax("/cuisine/findAll", {isShow: 1}, "get");
        console.log(res);
        if (res != null) {
            setCuisineData(res.data);
        }
    }

    function setCuisineData(data) {
        let str = "<option value=''>请选择菜系</option>";
        for (let i = 0; i < data.length; i++) {
            str += ' <option value="' + data[i].id + '">' + data[i].title + '</option>';
        }
        $("#cuisine").html(str);
        form.render();
    }

    const E = window.wangEditor;
    const editor = new E('#content');
    const editUrl = '/upload';//服务器访问地址
    editor.customConfig.uploadImgShowBase64 = true;  // 使用 base64 保存图片
    editor.customConfig.uploadImgServer = editUrl; // 上传图片到服务器
    editor.customConfig.showLinkImg = false;// 隐藏“网络图片”tab
    //配置属性名称，绑定请求的图片数据
    editor.customConfig.uploadFileName = 'wangEditorUrl';
    editor.customConfig.withCredentials = true;
    // 将图片大小限制为 5M
    editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;
    editor.customConfig.uploadImgHooks = {

        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            console.log(result);
        },
        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            let url = result.data.src;
            console.log(url);
            insertImg(url)//回显到富文本里面
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    };

    //富文本创建
    editor.create();


//    查询数据并显示在页面
    findById();

    function findById() {
        let id = sessionStorage.getItem("productId");
        let res = myAjax("/product/update", {id: id}, "get");
        if (res.data != null) {
            setProductData(res.data);
        }
    }

    function setProductData(data) {
        $("#name").val(data.name);
        $("#normalPrice").val(data.normalPrice);
        //将原来的图片地址显示在图片div里面
        $("#demo1").attr("src", data.imgHref);
        //给全局变量文件上传的地址赋值，因为编辑的时候我们需要用到它，
        path = data.imgHref;
        //菜系应该选中
        $("#cuisine").val(data.cuisineId);
        // 富文本应该回显
        editor.txt.html(data.content);
    }

    // //初演示
    form.on('submit(edit)', function (data) {
        data = data.field;
        data.imgHref = path;
        data.content = editor.txt.html();
        data.id = sessionStorage.getItem("productId")

        console.log(data);

        // let res=myAjax("/back/product/update",data,"post");
        // if(res!=null){
        //     if (res.count == 1) {
        //         layer.alert("编辑成功", {
        //                 icon: 6
        //             },
        //             function () {
        //                 //关闭当前frame
        //                 xadmin.close();
        //
        //                 // 可以对父窗口进行刷新
        //                 xadmin.father_reload();
        //             });
        //     } else {
        //         layer.alert("编辑失败");
        //     }
        // }else {
        //     layer.alert("增加失败");
        // }

        return false;
    })

});